<!-- 统计卡片 -->
<template>
  <el-row :gutter="15">
    <el-col v-bind="styleResponsive ? { lg: 6, md: 12 } : { span: 8 }">
      <el-card class="analysis-chart-card" shadow="never">
        <template v-slot:header>
          <div class="ele-cell">
            <div class="ele-cell-content">总支付金额</div>
            <el-tooltip content="" placement="top">
              <i
                class="el-icon-_question ele-text-placeholder"
                style="cursor: pointer"
              >
              </i>
            </el-tooltip>
          </div>
        </template>
        <div class="analysis-chart-card-num ele-text-heading"
          >¥ {{ saleData.total_pay_amount }}</div
        >

        <div class="analysis-chart-card-content" style="padding-top: 10px">
          <span>优惠券/消费抵扣订单:¥{{ saleData.total_order_amount }}</span>
        </div>

        <div class="analysis-chart-card-content" style="padding-top: 10px">
          <span>优惠券/消费购买:¥{{ saleData.total_consumer_amount }}</span>
        </div>
        <div class="analysis-chart-card-content" style="padding-top: 10px">
          <span>票根购买:¥{{ saleData.total_ticket_amount }}</span>
           <span style="margin-left:50px">卡券购买:¥{{ saleData.coupon_amount }}</span>
        </div>

       
        <el-divider />
      </el-card>
    </el-col>

    <el-col v-bind="styleResponsive ? { lg: 6, md: 12 } : { span: 8 }">
      <el-card class="analysis-chart-card" shadow="never">
        <template v-slot:header>
          <div class="ele-cell">
            <div class="ele-cell-content">订单销售额</div>
            <el-tooltip content="" placement="top">
              <i
                class="el-icon-_question ele-text-placeholder"
                style="cursor: pointer"
              >
              </i>
            </el-tooltip>
          </div>
        </template>
        <div class="analysis-chart-card-num ele-text-heading"
          >¥ {{ saleData.total_amount }}</div
        >

        <div class="analysis-chart-card-content" style="padding-top: 10px">
          <span>实际到账:¥{{ saleData.pay_amount }}</span>
        </div>

        <div class="analysis-chart-card-content" style="padding-top: 10px">
          <span>已补贴:¥{{ saleData.subsidy_amount }}</span>
        </div>
        <div class="analysis-chart-card-content" style="padding-top: 10px">
          <span>待补贴:¥{{ saleData.wait_subsidy_amount }}</span>
        </div>
        <el-divider />
      </el-card>
    </el-col>

    <el-col v-bind="styleResponsive ? { lg: 6, md: 12 } : { span: 8 }">
      <el-card class="analysis-chart-card" shadow="never">
        <template v-slot:header>
          <div class="ele-cell">
            <div class="ele-cell-content">用户数量</div>
            <el-tooltip content="" placement="top">
              <i
                class="el-icon-_question ele-text-placeholder"
                style="cursor: pointer"
              >
              </i>
            </el-tooltip>
          </div>
        </template>
        <div class="analysis-chart-card-num ele-text-heading">
          {{ saleData.user_count }}</div
        >

        <div class="analysis-chart-card-content" style="padding-top: 10px">
          <span>今日:{{ saleData.today_user_count }}</span>
        </div>

        <div class="analysis-chart-card-content" style="padding-top: 10px">
          <span>昨日:{{ saleData.yesterday_user_count }}</span>
        </div>
        <div class="analysis-chart-card-content" style="padding-top: 10px">
          <span>本月:{{ saleData.moon_user_count }}</span>
        </div>
        <el-divider />
      </el-card>
    </el-col>

    <el-col v-bind="styleResponsive ? { lg: 6, md: 12 } : { span: 8 }">
      <el-card class="analysis-chart-card" shadow="never">
        <template v-slot:header>
          <div class="ele-cell">
            <div class="ele-cell-content">领券数量</div>
            <el-tooltip content="" placement="top">
              <i
                class="el-icon-_question ele-text-placeholder"
                style="cursor: pointer"
              >
              </i>
            </el-tooltip>
          </div>
        </template>
        <div class="analysis-chart-card-num ele-text-heading">
          {{ saleData.claim_count }}</div
        >

        <div class="analysis-chart-card-content" style="padding-top: 10px">
          <span>平台消费券:{{ saleData.platform_claim_count }}</span>
        </div>

        <div class="analysis-chart-card-content" style="padding-top: 10px">
          <span>店铺优惠券:{{ saleData.store_claim_count }}</span>
        </div>
        <div class="analysis-chart-card-content" style="padding-top: 10px">
          <span>使用数量:{{ saleData.write_claim_count }}</span>
        </div>
        <el-divider />
      </el-card>
    </el-col>

    <el-col v-bind="styleResponsive ? { lg: 6, md: 12 } : { span: 8 }">
      <el-card class="analysis-chart-card" shadow="never">
        <template v-slot:header>
          <div class="ele-cell">
            <div class="ele-cell-content">店铺数量</div>
            <el-tooltip content="" placement="top">
              <i
                class="el-icon-_question ele-text-placeholder"
                style="cursor: pointer"
              >
              </i>
            </el-tooltip>
          </div>
        </template>
        <div class="analysis-chart-card-num ele-text-heading">
          {{ saleData.store_count }}</div
        >

        <div class="analysis-chart-card-content" style="padding-top: 10px">
          <span>活动数:{{ saleData.activity_count }}</span>
        </div>

        <div class="analysis-chart-card-content" style="padding-top: 10px">
          <span>卡券数:{{ saleData.coupon_count }}</span>
        </div>
        <div class="analysis-chart-card-content" style="padding-top: 10px">
          <span>票根数:{{ saleData.ticket_count }}</span>
        </div>
        <el-divider />
      </el-card>
    </el-col>

    <el-col v-bind="styleResponsive ? { lg: 6, md: 12 } : { span: 8 }">
      <el-card class="analysis-chart-card" shadow="never">
        <template v-slot:header>
          <div class="ele-cell">
            <div class="ele-cell-content">进件支付金额</div>
            <el-tooltip content="" placement="top">
              <i
                class="el-icon-_question ele-text-placeholder"
                style="cursor: pointer"
              >
              </i>
            </el-tooltip>
          </div>
        </template>
        <div class="analysis-chart-card-num ele-text-heading">
          ¥{{ saleData.amount }}</div
        >

        <div
          class="analysis-chart-card-content"
          style="padding-top: 10px"
          v-if="platform_id > 0"
        >
          <span>站点收益:¥{{ saleData.system_amount }}</span>
        </div>

        <div
          class="analysis-chart-card-content"
          style="padding-top: 10px"
          v-if="platform_id == 0"
        >
        </div>

        <div class="analysis-chart-card-content" style="padding-top: 10px">
          <span>平台收益:¥{{ saleData.platform_amount }}</span>
        </div>
        <div class="analysis-chart-card-content" style="padding-top: 10px">
          <span>店铺支付金额:{{ saleData.store_amount }}</span>
        </div>
        <el-divider />
      </el-card>
    </el-col>
  </el-row>
</template>

<script>
import { use } from 'echarts/core';
import { CanvasRenderer } from 'echarts/renderers';
import { LineChart, BarChart } from 'echarts/charts';
import { GridComponent, TooltipComponent } from 'echarts/components';
import VChart from 'vue-echarts';
import { getAdminSaleData } from '@/api/dashboard/analysis';
import { echartsMixin } from '@/utils/echarts-mixin';

use([CanvasRenderer, LineChart, BarChart, GridComponent, TooltipComponent]);

export default {
  name: 'StatisticsCard',
  components: { VChart },
  mixins: [echartsMixin(['visitChart', 'payNumChart'])],
  data() {
    return {
      // 访问量折线图配置
      visitChartOption: {},
      platform_id: localStorage.getItem('platform_id'),
      // 支付笔数柱状图配置
      payNumChartOption: {},
      saleData: {
        total_amount: 0,
        pay_amount: 0,
        wait_subsidy_amount: 0,
        apply_subsidy_amount: 0,
        subsidy_amount: 0,

        user_count: 0,
        today_user_count: 0,
        yesterday_user_count: 0,
        moon_user_count: 0,

        platform_claim_count: 0,
        store_claim_count: 0,
        claim_count: 0,
        write_claim_count: 0,

        store_count: 0,
        activity_count: 0,
        coupon_count: 0,
        ticket_count: 0,

        amount: 0,
        system_amount: 0,
        platform_amount: 0,
        store_amount: 0,

        total_pay_amount: 0,
        total_order_amount: 0,
        total_ticket_amount: 0,
        total_consumer_amount: 0,
        coupon_amount:0,
      }
    };
  },
  computed: {
    // 是否开启响应式布局
    styleResponsive() {
      return this.$store.state.theme.styleResponsive;
    }
  },
  created() {
    this.getPayNumData();
  },
  methods: {
    /* 获取数据 */
    getPayNumData() {
      getAdminSaleData()
        .then((data) => {
          this.saleData = data;

          this.visitChartOption = {
            color: '#975fe5',
            tooltip: {
              trigger: 'axis',
              formatter:
                '<i class="ele-chart-dot" style="background: #975fe5;"></i>{b0}: {c0}'
            },
            grid: {
              top: 10,
              bottom: 0,
              left: 0,
              right: 0
            },
            xAxis: [
              {
                show: false,
                type: 'category',
                boundaryGap: false,
                data: data.date
              }
            ],
            yAxis: [
              {
                show: false,
                type: 'value',
                splitLine: {
                  show: false
                }
              }
            ],
            series: [
              {
                type: 'line',
                smooth: true,
                symbol: 'none',
                areaStyle: {
                  opacity: 0.5
                },
                data: data.client_value
              }
            ]
          };

          this.payNumChartOption = {
            tooltip: {
              trigger: 'axis',
              formatter:
                '<i class="ele-chart-dot" style="background: #5b8ff9;"></i>{b0}: {c0}'
            },
            grid: {
              top: 10,
              bottom: 0,
              left: 0,
              right: 0
            },
            xAxis: [
              {
                show: false,
                type: 'category',
                data: data.month
              }
            ],
            yAxis: [
              {
                show: false,
                type: 'value',
                splitLine: {
                  show: false
                }
              }
            ],
            series: [
              {
                type: 'bar',
                data: data.brokerage_value
              }
            ]
          };
        })
        .catch((e) => {
          this.$message.error(e.message);
        });
    }
  }
};
</script>

<style lang="less" scoped>
/deep/ .el-divider--horizontal {
  margin: 0 0 12px 0;
}

.total {
  font-size: 14px;
  font-weight: 400;
  color: #999;
  line-height: 22px;
}
.ivu-text-right {
  text-align: right;
}
.analysis-chart-card-num {
  font-size: 30px;
}

.analysis-chart-card-content {
  height: 20px;
  box-sizing: border-box;
  margin-bottom: 12px;
}

.analysis-chart-card-text {
  padding-top: 12px;
}
</style>
